<template>
  <div class="auto-task scroll">
    <el-row v-for="(btn, index) in buttons" :key="index" class="el-button-my">
      <!-- icon -->
      <span class="icon iconfont" :class="btn.icon"></span>
      <!-- name -->
      <span v-text="btn.name"></span>
      <!-- swith 开关 -->
      <el-switch
        v-model="btn.switchState"
        class="rt-input"
        active-color="#13ce66"
        disabled
        @click.native="changeStatus(btn)"
      ></el-switch>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { autoTaskDetailList, autoTaskUpdate } from '@/api/httpApi'

export default {
  name: 'ToolsAutoTask',
  data() {
    return {
      buttons: [
        {
          keyName: 1001,
          icon: 'jubo-lucky-money',
          name: '智能抢红包',
          switchState: false
        },
        {
          keyName: 1002,
          icon: 'jubo-add-friend',
          name: '自动通过好友请求',
          switchState: false
        },
        {
          keyName: 1003,
          icon: 'jubo-accept',
          name: '自动通过群邀请',
          switchState: false
        },
        {
          keyName: 1004,
          icon: 'jubo-i-money',
          name: '自动收转账',
          switchState: false
        },
        {
          keyName: 1005,
          icon: 'jubo-i-money',
          name: '自动通过好友请求并用企业微信加对方',
          switchState: false
        },
        {
          keyName: 1006,
          icon: 'jubo-i-money',
          name: '聊天关键词自动回复',
          switchState: false
        },
        {
          keyName: 1007,
          icon: 'jubo-i-money',
          name: '群聊关键词自动回复',
          switchState: false
        }
      ],
      autoTaskConfig: {} // 配置文件
    }
  },
  computed: {
    ...mapGetters({
      currentUser: 'currentUser',
      currentWeChatId: 'tools/currentWeChatId'
    })
  },
  watch: {
    // 微信改变
    currentWeChatId(newId) {
      this.autoTaskConfig = {}
      if (newId) {
        this.getAutoTaskDetailList()
      }
    }
  },
  created() {
    if (this.currentWeChatId) {
      // 从服务端拉取配置文件
      this.getAutoTaskDetailList()
    }
  },
  mounted() {
    this.modifyState()
  },
  methods: {
    // 获取自动任务配置
    getAutoTaskDetailList() {
      autoTaskDetailList(this.currentUser.SupplierId, this.currentWeChatId)
        .then((res) => {
          if (res.code === 0) {
            res.data.forEach((x) => {
              this.autoTaskConfig[x.auto_type] = x.state
            })
            this.modifyState()
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
          this.modifyState()
        })
    },
    // 修改switch的状态
    modifyState() {
      for (let index = 0; index < this.buttons.length; index++) {
        const flag = this.autoTaskConfig[this.buttons[index].keyName]
        if (flag === 0) {
          this.$set(this.buttons[index], 'switchState', true)
        } else {
          this.$set(this.buttons[index], 'switchState', false)
        }
      }
    },
    // 修改服务端的配置
    changeStatus(btn) {
      if (this.currentWeChatId) {
        autoTaskUpdate(this.currentUser.SupplierId, this.currentWeChatId, Number(btn.keyName), btn.switchState ? 1 : 0)
          .then((res) => {
            if (res.code === 0 && res.data) {
              const message = res.data
              const actionMap = {
                1001: '智能抢红包',
                1002: '自动通过好友请求',
                1003: '自动通过群邀请',
                1004: '自动收转账',
                1005: '自动通过好友请求并用企业微信加对方',
                1006: '聊天关键词自动回复',
                1007: '群聊关键词自动回复'
              }
              const result = message.state === 0 ? '打开' : '关闭'
              const str = result + actionMap[message.auto_type]
              this.$message({
                type: 'success',
                message: str,
                duration: 1000
              })
              // 重新拉取列表
              this.getAutoTaskDetailList()
            }
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
      } else {
        this.$message({
          message: '请先选中微信',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.auto-task {
  height: 100%;
  overflow-y: auto;

  display: flex;
  flex-wrap: wrap;
  //   justify-content: flex-start;
  align-content: flex-start;

  .el-button-my {
    height: 40px;
    min-height: 40px;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    margin: 10px;
    border: solid #67c23a 1px;
    border-radius: 4px;

    .el-switch {
      margin-left: 20px;
      ::v-deep .el-switch__core,
      .el-switch__label {
        cursor: pointer;
      }
    }
  }
}
</style>
